<script lang="ts" setup>
import { getGamesImg } from "@/utils";

defineOptions({
  name: "NewGames",
});
withDefaults(
  defineProps<{
    data?: any[];
  }>(),
  {
    data: () => [],
  }
);
const router = useRouter();
const activeIndex = ref(0);
const swiperChange = (index: number) => {
  activeIndex.value = index;
};
// const { play } = usePlay();
const jumpToDetail = (game: any) => {
  router.push(`/detail?id=${game.id}`);
  // play(game);
};
</script>
<template>
  <div class="w-344 mx-auto mb-16">
    <div class="relative">
      <div
        class="absolute top-0 bg-[#03D403] text-white z-1 font-600 px-4 py-4 text-16 rounded-tl-10 rounded-br-10"
      >
        New Games
      </div>
      <van-swipe
        :autoplay="3000"
        lazy-render
        class="rounded-10"
        @change="swiperChange"
      >
        <van-swipe-item v-for="it in data" @click="jumpToDetail(it)">
          <img
            class="w-full h-156 rounded-10"
            :src="getGamesImg(it.pathPicture, '3')"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div
      class="w-full h-auto py-12 bg-[#fff] shadow-[0px_1px_5px_1px_rgba(0,0,0,0.2)] rounded-10 flex justify-around items-start mt-[-12px] relative z-2"
    >
      <div
        class="flex flex-col justify-center gap-y-4 transition-all duration-300 ease-in-out"
        :class="[activeIndex === idx ? 'scale-[1.1]' : 'scale-[1]']"
        v-for="(it, idx) in data"
        :key="idx"
        @click="jumpToDetail(it)"
      >
        <img
          class="w-53 h-53 rounded-10"
          :src="getGamesImg(it.pathPicture, '1')"
          alt=""
        />
        <p class="w-53 font-500 text-12 color-[#000] lh-14 text-center">
          {{ it.name }}
        </p>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped></style>
